<template>
  <div class="login-content">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="账户" prop="username">
        <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >登录</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive,toRefs,ref } from "vue";
import {LoginData} from '../type/login'
import type { FormRules,FormInstance } from 'element-plus'
import {storage} from '../utils/storage'
import {useRouter} from 'vue-router'
export default defineComponent({
  setup() {
    const data=reactive(new LoginData())
    const rules = reactive<FormRules>({
        username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 5, message: '账号长度为3到5', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 8, message: '密码长度为3到8', trigger: 'blur' },
        ],
    })
    const ruleFormRef = ref<FormInstance>()
    const router=useRouter()
    const submitForm = (formEl:FormInstance|undefined)=>{
        if(!formEl) return;
        formEl.validate((valid) => {
            if(valid){
                console.log('登录成功');
                storage.set('token','token')
                router.push('/')
            }else{
                console.log('请规范填写')
                return false
            }
        })
    }
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
        }
    return {
        ...toRefs(data),    
        rules,
        ruleFormRef,    
        submitForm,
        resetForm,
    };
  },
});
</script>

<style lang='less' scoped>
.login-content {
  width: 100%;
  height: 100%;
  background: url("../assets/01.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
 .demo-ruleForm{
    width: 300px;
    height: 160px;
    background-color: #fff;
    padding: 20px;
 }
}
</style>